<!-- shallowReadonly第一层是只读状态不可更爱，内层可以更改 -->
<template>
  <h1>name:{{ b.name }}</h1>
  <!-- <h1>b.obj.name:{{b.obj.name}}</h1>  模板访问会触发响应式，用watch来验证-->
</template>
<script setup lang="ts" name="Count">
import { reactive, ref, watch,shallowReadonly } from 'vue'

const b = shallowReadonly({ name: 'zll', age: 10, obj: { name: '小红' } })


setTimeout(()=>{
b.name = 'e' // 报错不能更改
b.obj.name = '小三' //可以更改
},2000)
</script>
